<template>
  <div class="message-center-container">
    <div class="nav-box">
      <van-tabs
        v-model="activeName"
        @click="changeTab"
      >
        <!-- 消息类型 1系统公告 2预警消息 3提示消息 4站内信 5设备报警 6保养通知 7工单消息 -->
        <!-- <van-tab title="全部">
          <MessageList
            v-if="allData.length"
            :data="allData"
            :total="total"
            :loading="loading"
            :finished="finished"
            @scrollBottom="scrollBottom"
          />
          <NoMessageData v-if="noDataState" />
        </van-tab> -->
        <van-tab name="系统公告">
          <template #title>
            <div class="tab-box">
              <span class="tab-title">系统公告</span>
              <span
                class="unread-box dot"
                v-if="systemNum"
              ></span>
            </div>
          </template>
          <MessageList
            v-if="systemData.length"
            :data="systemData"
            :total="total"
            :loading="loading"
            :finished="finished"
            @scrollBottom="scrollBottom"
          />
          <NoMessageData v-if="noDataState" />
        </van-tab>
        <van-tab name="设备报警">
          <template #title>
            <div class="tab-box">
              <span class="tab-title">设备报警</span>
              <span
                class="unread-box"
                v-if="alarmNum"
              >{{ alarmNum }}</span>
            </div>
          </template>
          <MessageList
            v-if="alarmData.length"
            :data="alarmData"
            :total="total"
            :loading="loading"
            :finished="finished"
            @scrollBottom="scrollBottom"
          />
          <NoMessageData v-if="noDataState" />
        </van-tab>
        <van-tab name="保养通知">
          <template #title>
            <div class="tab-box">
              <span class="tab-title">保养通知</span>
              <span
                class="unread-box dot"
                v-if="maintainanceNum"
              ></span>
            </div>
          </template>
          <MessageList
            v-if="maintainanceData.length"
            :data="maintainanceData"
            :total="total"
            :loading="loading"
            :finished="finished"
            @scrollBottom="scrollBottom"
          />
          <NoMessageData v-if="noDataState" />
        </van-tab>
        <van-tab name="工单消息">
          <template #title>
            <div class="tab-box">
              <span class="tab-title">工单消息</span>
              <span
                class="unread-box dot"
                v-if="workOrderNum"
              ></span>
            </div>
          </template>
          <MessageList
            v-if="workOrderData.length"
            :data="workOrderData"
            :total="total"
            :loading="loading"
            :finished="finished"
            @scrollBottom="scrollBottom"
          />
          <NoMessageData v-if="noDataState" />
        </van-tab>
      </van-tabs>
    </div>

    <ul
      class="operate-box border-top"
      v-if="total > 0"
    >
      <li @click="readAll">
        <i class="iconfont iconyidu"></i>
        全部已读
      </li>
      <!-- <li @click="clearAll">
        <i class="iconfont iconqingkong"></i>
        清空消息
      </li> -->
    </ul>
  </div>
</template>

<script>
import { Tab, Tabs, Dialog, Popup } from 'vant';
import MessageList from './component/MessageList.vue';
import NoMessageData from './component/NoData.vue';
import { getMsgList, readAllMessage, deleteAllMessage } from '@/api/message.js';
import { getMessageStatus } from '@/api/common.js';

export default {
  name: 'MessageCenter',
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Dialog.name]: Dialog,
    [Popup.name]: Popup,
    MessageList,
    NoMessageData
  },
  data() {
    return {
      unreadNum: '',
      activeName: '系统公告',
      currentName: '系统公告',
      type: 1,
      showDetail: true,
      allData: [],
      systemTitle: '系统公告',
      systemNum: 0,
      systemData: [],
      alarmTitle: '设备报警',
      alarmNum: 0,
      alarmData: [],
      maintainanceTitle: '保养通知',
      maintainanceNum: 0,
      maintainanceData: [],
      workOrderTitle: '工单消息',
      workOrderNum: 0,
      workOrderData: [],
      total: '',
      pageIndex: 1,
      pageSize: 15,
      loading: false, //加载状态
      finished: false, //全部加载
      noDataState: false //无数据显示状态
    };
  },
  created() {
    this.getMessageStatus();
    this.getMsgList(1);
  },
  methods: {
    // 获取消息各状态下的未读消息数量
    getMessageStatus() {
      getMessageStatus().then(res => {
        let { system, callPolice, normal, order_message } = res.data;
        system = system > 99 ? '99+' : system;
        callPolice = callPolice > 99 ? '99+' : callPolice;
        normal = normal > 99 ? '99+' : normal;
        order_message = order_message > 99 ? '99+' : order_message;
        this.systemNum = system;
        this.alarmNum = callPolice;
        this.maintainanceNum = normal;
        this.workOrderNum = order_message;
      });
    },
    // 切换tab
    changeTab(name) {
      // 消息类型 1-系统公告 2-预警消息 3-提示消息 4-站内信 5-设备报警 6-保养通知 7-工单消息
      let obj = {
        系统公告: 1,
        设备报警: 5,
        保养通知: 6,
        工单消息: 7
      };
      let type = obj[name];
      this.allData = [];
      this.systemData = [];
      this.alarmData = [];
      this.maintainanceData = [];
      this.workOrderData = [];
      this.currentName = name;
      this.type = type;
      this.pageIndex = 1;
      this.loading = false;
      this.finished = false;
      this.noDataState = false;
      this.getMsgList(type);
    },
    // 获取消息列表
    getMsgList(type) {
      getMsgList({
        status: 3,
        page: this.pageIndex,
        page_size: this.pageSize,
        message_type: type
      }).then(res => {
        this.loading = false;
        let data = res.data.list || [];
        this.total = res.data.total || 0;
        switch (type) {
          case 0:
            this.allData = this.allData.concat(data);
            this.handleFinishAndNoData(this.allData, res.data.list);
            break;
          case 1:
            this.systemData = this.systemData.concat(data);
            this.handleFinishAndNoData(this.systemData, res.data.list);
            break;
          case 5:
            this.alarmData = this.alarmData.concat(data);
            this.handleFinishAndNoData(this.alarmData, res.data.list);
            break;
          case 6:
            this.maintainanceData = this.maintainanceData.concat(data);
            this.handleFinishAndNoData(this.maintainanceData, res.data.list);
            break;
          case 7:
            this.workOrderData = this.workOrderData.concat(data);
            this.handleFinishAndNoData(this.workOrderData, res.data.list);
            break;
        }
      });
    },
    // 处理完成及无数据情况
    handleFinishAndNoData(typeData, result) {
      // 无数据
      if (typeData.length <= 0) {
        this.noDataState = true;
        this.loading = false;
        this.finished = false;
      }

      // 全部加载完成
      if (this.pageIndex > 1 && result.length < this.pageSize) {
        this.finished = true;
      }
    },
    // 加载更多
    onLoadMore() {
      this.loading = true;
      if (!this.finished) {
        // 异步更新数据
        setTimeout(() => {
          this.pageIndex++;
          this.getMsgList(this.type);
        }, 500);
      }
    },
    scrollBottom() {
      this.$debounceFn(this.onLoadMore, 300);
    },
    // 全部已读
    readAll() {
      let msgTypeName = this.currentName;
      Dialog.confirm({
        title: '提示',
        message: `确定将${msgTypeName}全部未读消息标记为已读？`,
        confirmButtonText: '确定',
        confirmButtonColor: '#3378FF'
      })
        .then(() => {
          readAllMessage({
            type: this.type
          }).then(res => {
            this.getMessageStatus();
            this.changeTab(this.currentName);
          });
        })
        .catch(() => {});
    },
    // 清空消息
    clearAll() {
      Dialog.confirm({
        title: '提示',
        message: '确定清空所有消息？',
        confirmButtonText: '确定',
        confirmButtonColor: '#3378FF'
      })
        .then(() => {
          deleteAllMessage().then(res => {
            this.changeTab(this.currentName);
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.message-center-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .nav-box {
    flex: 1;
    width: 100%;
    height: calc(100% - 1.066667rem);

    ::v-deep .van-tabs {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;

      .van-tab__text {
        overflow: unset;
      }

      .tab-box {
        display: flex;
        align-items: center;

        .unread-box {
          display: flex;
          justify-content: center;
          align-items: center;
          min-width: 0.4rem;
          height: 0.4rem;
          margin-top: -0.213333rem;
          margin-left: -0.133333rem;
          padding: 0 0.106667rem;
          font-size: 0.266667rem;
          color: #fff;
          border-radius: 0.4rem;
          background-color: #f15d5d;

          &.dot {
            width: 0.21333rem;
            min-width: 0;
            height: 0.21333rem;
            border-radius: 50%;
            padding: 0;
          }
        }
      }

      .van-tabs__line {
        background-color: var(--color-primary);
      }

      .van-tabs__wrap {
        flex-shrink: 0;
        border-bottom: 1px solid var(--border-color);
      }

      .van-tabs__content {
        flex: 1;
        height: 0;

        .van-tab__pane {
          height: 100%;
        }
      }
    }
  }

  .operate-box {
    flex-shrink: 0;
    display: flex;
    width: 100%;
    height: 1.066667rem;
    background-color: #fff;

    > li {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      color: var(--color-deep-gray);
      font-size: 0.373333rem;

      &:first-of-type {
        position: relative;

        &::after {
          content: '';
          position: absolute;
          top: 0.213333rem;
          right: 0;
          width: 1px;
          height: 0.64rem;
          // background-color: #f2f6fc;
        }
      }

      i {
        margin-right: 0.106667rem;
        color: var(--color-gray);
      }
    }
  }
}
</style>